<template>
  <!-- 支付宝支付界面 -->

  <div style="text-align: center;display: flex;justify-content: center">
    <!-- 支付宝支付界面 -->
    <div class="ali-pay box-shadow mt-4 border-radius"style="display: none">
      <div v-html="payForm" ref="pay"></div>
    </div>

    <div style="margin-left: 50px">
      <h1>支付宝支付</h1>
      <el-button @click="toPay">电脑网站支付</el-button>
      <el-button @click="toH5Pay">手机网站支付</el-button>
      <el-button @click="toAppPay">发起App支付</el-button>
      <br/>
      <div>
        <h1>微信支付</h1>
        <div style="display: inline-block;margin-bottom: 30px">
          <el-button @click="toWxPay('NATIVE')">小程序Native支付</el-button>
          <div style="font-size: 20px;">
            <div>微信支付二维码</div>
            <el-image :src="payInfo" style="width: 200px;height:200px"></el-image>
          </div>
        </div>
      </div>

      <div>
        <el-button @click="toWxPay('APP')">微信App支付</el-button>

        <el-button @click="toWxPay('JSAPI')">微信JSAPI支付</el-button>

        <el-button @click="toWxPay('H5')">微信H5支付</el-button>

      </div>

    </div>
    <div style="font-size: 20px;width: 500px;margin: 0 auto;">
      <div style="margin-top:60px;margin-bottom:50px;text-align: left">
        支付关键信息：
        <json-viewer :expand-depth=5 :value="payInfo"></json-viewer>
      </div>
    </div>
  </div>
</template>
<script>
import VueCookies from 'vue-cookies'

export default {
  components: {},
  props: [],
  data() {
    return {
      payInfo: "",
      payForm:"",
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    toPay() {
      this.$get("/pay/testAliPay?payType=ALIPAY&payFrom=PC", {}).then(res => {
        if (res.R) {
          this.payForm=res.data.body.body;
          this.$nextTick(() => {
            this.$refs.pay.children[0].submit();
          });
        }
      })

    },
    toH5Pay() {
      this.$get("/pay/testAliPay?payType=ALIPAY&payFrom=H5", {}).then(res => {
        if (res.R) {
          this.payForm=res.data.body.body;
          this.$nextTick(() => {
            this.$refs.pay.children[0].submit();
          });
        }
      })
    },
    toAppPay() {
      this.$get("/pay/testAliPay?payType=ALIPAY&payFrom=APP", {}).then(res => {
        if (res.R) {
          this.payInfo = res.data.body.body
        }
      })
    }
    , toWxPay(payFrom) {
      this.$get("/pay/testAliPay?payType=WECHAT&payFrom=" + payFrom + "", {}).then(res => {
        if (res.R) {
          if (payFrom == 'APP' || payFrom == "JSAPI") {
            this.payInfo = res.data.body.payment
            return;
          }
          this.payInfo = res.data.body.body
        }
      })
    },
  },
};
</script>
